<!-- 
  @description: 待办项
-->
<template>
  <div class="todo-item-dv" :class="curShowStatus">
    <!-- 完成按钮 -->
    <button @click="finish(todoItem)" class="btn left-btn finish-btn">
      <span class="icon-wancheng"></span>
    </button>
    <!-- 待办内容 -->
    <div
      class="todo-content"
      @click="todoItem.isEdit = true"
    >
      <span v-if="!todoItem.isEdit">{{ todoItem.content }}</span>
      <el-input
        size="default"
        type="text"
        v-else
        v-model="todoItem.content"
        v-focus
        @keyup.enter="confirmUpdate(todoItem)"
        @blur="todoItem.isEdit = false"
      />
    </div>
    <!-- 专注按钮 -->
    <button @click="changeConcentrate(todoItem)" class="btn concentrate-btn">
      <span class="icon-zhuanzhu-copy"></span>
    </button>
    <!-- 删除按钮 -->
    <button @click="delItem(todoItem)" class="btn right-btn del-btn">
      <span class="icon-shanchu"></span>
    </button>
  </div>
</template>

<script setup lang="ts">
import {
  computed,
  ComputedRef,
  onMounted,
  PropType,
  reactive,
  ref,
  watch,
} from 'vue'
import { Todo } from '../../types/TodoType'
import { useStore } from '../../store/index'
import { Store, storeToRefs } from 'pinia'

const store: any = useStore()
let { curConcentrateID } = storeToRefs(store)

const props = defineProps({
  todoItem: {
    type: Object as PropType<Todo>,
    default: null,
  },
})

// 创建input时自动聚焦
const vFocus: any = {
  mounted(el: any) {
    el.querySelector('input').focus()
  },
}

const curShowStatus: ComputedRef = computed(() => {
  if (curConcentrateID.value <= 0) {
    return 'normal'
  } else {
    if (curConcentrateID.value === props.todoItem.id) {
      return 'concentrate'
    } else {
      return 'un-concentrate'
    }
  }
})

const emit = defineEmits([
  'confirmUpdate',
  'delItem',
  'changeConcentrate',
  'finish',
])

function finish(item: Todo) {
  emit('finish', item)
}

function confirmUpdate(item: Todo) {
  emit('confirmUpdate', item)
}

function delItem(item: Todo) {
  emit('delItem', item.id)
}

// 专注模式
function changeConcentrate(item: Todo) {
  if (
    curConcentrateID.value > 0 &&
    curConcentrateID.value === props.todoItem.id
  ) {
    const UN_CONCENTRATE = 0
    store.setIsConcentrate(UN_CONCENTRATE)
  } else {
    store.setIsConcentrate(item.id)
  }
}
</script>

<style lang="less" scoped>
@btn-width: 50px;
// 旧
.todo-item-dv1 {
  display: flex;
  justify-content: space-between;

  li {
    list-style: none;
  }
}

// 专心模式颜色
.concentrate {
  // color: #4080ff;
  color: #ff8a00;
}

// 非专心模式颜色
.un-concentrate {
  color: #ddd;
}

// 新
.todo-item-dv {
  width: 100%;
  height: @btn-width;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 10px 0 0 10px;
  // .dv-shadow(10px, 0.1);
}

.btn {
  width: @btn-width;
  height: @btn-width;
  border: 0;
  outline: none;
  transition: all 0.15s ease-in-out;

  &:hover {
    cursor: pointer;
  }
}

.left-btn {
  border-radius: 10px 0 0 10px;
  outline: none;
  border: 0;
}

.right-btn {
  border-radius: 0 10px 10px 0;
}

// 完成按钮
.finish-btn {
  color: #aaa;
  background-color: #eee;

  span {
    font-size: 24px;
  }

  &:hover {
    background-color: #f2f2f2;
    color: @success-color;
  }
}

// 专注按钮
.concentrate-btn {
  color: @primary-color;
  background-color: @primary-light-color;

  &:hover {
    opacity: 0.7;
  }
}

// 删除按钮
.del-btn {
  background-color: @error-light-color;
  color: @error-color;

  &:hover {
    opacity: 0.7;
  }
}

.todo-content {
  width: calc(100% - @btn-width * 2);
  height: 100%;
  box-sizing: inherit;
  padding: 0 20px;
  display: flex;
  align-items: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  .ellipsis();
}
</style>
